﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <title>Sign In | MCloud</title>
  <th:block th:replace="fragments/layout::core-css"/>
  <th:block th:replace="fragments/layout::app-css"/>
</head>

<body class="signup-page">
<div class="signup-box">
  <div class="logo">
    <a href="javascript:void(0);">MCloud</a>
    <small>MCloud Register Form</small>
  </div>
  <div class="card">
    <div class="body">
      <form id="sign_up" th:action="@{/api/v1/users/register}" method="POST">
        <div class="msg">Register a new membership</div>
        <div class="input-group">
          <span class="input-group-addon">
              <i class="material-icons">developer_board</i>
          </span>
          <div class="form-line">
            <select name="userType" class="form-control">
              <option value="USER">Personal</option>
              <option value="DEVELOPER">Developer</option>
            </select>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon">
              <i class="material-icons">person</i>
          </span>
          <div class="form-line">
            <input class="form-control" name="username" placeholder="Username" required autofocus>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon">
              <i class="material-icons">email</i>
          </span>
          <div class="form-line">
            <input type="email" class="form-control" name="email" placeholder="Email Address" required>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon">
              <i class="material-icons">lock</i>
          </span>
          <div class="form-line">
            <input type="password" class="form-control" name="password" minlength="6" placeholder="Password" required>
          </div>
        </div>
        <div class="input-group">
          <span class="input-group-addon">
              <i class="material-icons">lock</i>
          </span>
          <div class="form-line">
            <input type="password" class="form-control" name="confirm" minlength="6" placeholder="Confirm Password"
                   required>
          </div>
        </div>

        <button class="btn btn-block btn-lg bg-pink waves-effect">SIGN UP</button>

        <div class="m-t-25 m-b--5 align-center">
          <a th:href="@{/login}">You already have a membership?</a>
        </div>
      </form>
    </div>
  </div>
</div>

<th:block th:replace="fragments/layout::core-js"/>
<script th:src="@{/static/js/mcloud/mcloud.rest.js}"></script>
<th:block th:replace="fragments/plugins::jquery-form"/>
<script th:inline="javascript">
    $(function () {
        $('#sign_up').mvalidate({
            submitHandler: function () {
                var data = $("#sign_up").serializeJSON();
                var context = /*[[@{/}]]*/'';
                MCloud.rest.post({
                    url: context + 'api/v1/users/register',
                    data: JSON.stringify(data),
                    success: function (data) {
                        location.href = context + 'login';
                    }
                });
                return false;
            },
            rules: {
                'terms': {
                    required: true
                },
                'confirm': {
                    equalTo: '[name="password"]'
                }
            }
        });
    });
</script>
</body>

</html>